<template>
  <el-form :model="form" :rules="accountRules" ref="formRef" >
    <el-form-item label="帐号:" label-width="60px" prop="account">
      <el-input v-model="form.account" placeholder="请输入帐号" clearable></el-input>
    </el-form-item>
    <el-form-item label="密码:" label-width="60px" prop="password">
      <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
import { defineExpose } from 'vue';
// import { accountLogin } from '@/api/login';


// 1. 表单数据
const form = reactive({
  account: 'YYQX',
  password: '04281128'
})

// 2. 表单验证规则
const accountRules = {
  account: [
    { required: true, message: '帐号不能为空！', trigger: 'blur' },
    {  pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]+$', message: '帐号为3-10位汉字、字母或数字组成！', min: 3, max: 10, trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空!', trigger: 'blur' },
    { pattern: '^[a-zA-Z0-9]+$', min: 6, max: 18, message: '密码长度在6-18位之间，只能包含字母和数字!', trigger: 'blur' }
  ]
}

// 3. 账号登录逻辑
const router = useRouter();
const formRef = ref();
const  loginActive = () =>{
  // 表单验证
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('登录成功!');
      router.push('/home');
      console.log('account:',form.account,'password:',form.password);
    } else {
      ElMessage.error('登录失败，请检查输入是否正确!');
      console.log('登录失败!');
    }
  })
}
defineExpose({
  loginActive
})
</script>

<style scoped>

</style>